<template>
  <div >
    <div class="content" style="margin-top:-3vh;" :class="showDiv?'KeyFeaturesOut':'KeyFeaturesIn'">
      <div class="title-3">
        Technical <br> Architecture
      </div>
     <div class="contentB">
      <div class="content-box">
        <div class="content-box-left">
          <div>
            <div>
              <img src="./assets/Divm84.png" alt="" class="Divm81">
            </div>
            <div class="box-title">
              AI Orchestration Layer
            </div>
            <div class="box-subheading" style="width: 75%;">
              The central hub of AICMP that contains four primary sub-modules:
              Data Collection Module, Task Allocation Engine, Predictive Analytics Unit,
              Policy Management & Reinforcement Learning Module
            </div>
          </div>
          <div>
            <img class="img88" src="./assets/12.png" alt="" style="position: relative;top: 2vh;">
          </div>
        </div>
        <div class="content-box-right">
          <div>
            <div>
              <img src="./assets/Divm83.png" alt="">
            </div>
            <div class="box-title">
              Miner Interface Layer
            </div>
            <div class="box-subheading">
              AI-driven dashboards to visualize miners real time
              performance, operational parameters configuration
              and critical issues, all powered by AICMP and Eagle Eye AI agent
            </div>
          </div>
          <div>
            <img class="img88" src="./assets/13.png" alt="">
          </div>
        </div>
      </div>
      <div class="content-box-two">
        <div class="content-box-two-item one">
          <div>
            <img src="./assets/Divm82.png" alt="" class="Divm81">
          </div>
          <div class="box-title">
            Revenue Distribution Module
          </div>
          <div class="box-subheading" style="width:65%;" >
            Fully automatic mining revenue distribution process with immutable audit trail
          </div>
          <img class="img597 " src="./assets/image29.png" alt="" style="position: relative;top:0vh;">
        </div>
        <div class="content-box-two-item two">
          <div>
            <img src="./assets/Divm81.png" alt="" class="Divm81">
          </div>
          <div class="box-title">
            Feedback and Learning Loop
          </div>
          <div class="box-subheading" style="width: 63%;">
            All operational data feeds back into the AI Orchestration Layer to create a closed-loop system and refine
            the entire pipeline
          </div>
          <div style="display: flex;justify-content: center">
            <img class="img597" src="./assets/111.png" alt="" />
          </div>
        </div>
        <div class="content-box-two-item three">
          <div>
            <img src="./assets/Divm8.png" alt="" class="Divm81">
          </div>
          <div class="box-title">
            Security, Trust <br> & Communication Protocol
          </div>
          <div class="box-subheading" style="width: 75%;">
            AICMP employs multiple layers of network security to protect against attacks, such as TLS/SSL for
            encryption, dedicated miner authentication, DDOS protection module
          </div>
          <div>
            <img class="img597" src="./assets/101.png" alt="" />
          </div>
        </div>
      </div>
      <div class="foot">
          <div class="foot-left">
            <div>
              <img
                src="./assets/Group18.png"
                alt=""
                style="margin-top: 1.5vh"
              />
            </div>
            <div class="foot-wz">
              Copyright © 2025 aicmp.ai • All Rights Reserved
            </div>
          </div>
          <!--        <div class="foot-right" style="text-align: right;">-->
          <!--          <img src="./assets/1.png" alt="">-->
          <!--        </div>-->
        </div>
     </div>
    </div>
  </div>
</template>

<script>
export default{
  data(){
    return{
      showDiv:false
    }
  },
  beforeRouteLeave(to, from, next) {
    this.showDiv = true;
    setTimeout(() => {
      next();
    }, 500); // 等待动画完成后继续导航
  }
}</script>

<style scoped>
.foot {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.foot-left {
  position: absolute;
  display: flex;
  align-items: center;
    /* position: fixed; */
    bottom: -30px;
    left: -70px;
}
.foot-right {
  /* position: absolute; */
  /* right: 0px; */
}

.foot-wz {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #999999;
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.Divm81{
  position: relative;
  left: -10px;
}
  .content-box-left{
    align-items: center;
    background-image: url(assets/2-4.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position: ; */
    box-sizing: border-box;
  }

  .content-box-right{
    background-image: url(assets/2-3.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position: center; */
    box-sizing: border-box;
  }

  .one{
    background-image: url(assets/2-1.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position: center; */
    box-sizing: border-box;
  }
  .two{
    background-image: url(assets/2-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position: center; */
    box-sizing: border-box;
  }
  .three{
    background-image: url(assets/2-5.png);
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position: center; */
    box-sizing: border-box;
  }

  @media(max-width: 575.98px) {
    .img88{
      width: 100%;
    }
    .title-3{
      text-align: center;
      font-weight: bold;
      font-size: 32px;
  margin-bottom: 3vh;
      background: linear-gradient(35.26439014500239deg, #FFFFFF 0%, #FFFFFF 50%, #52525B 100%);
      background-clip: text;
      -webkit-text-fill-color: transparent;

      line-height: 73px;
      font-style: normal;
      text-transform: none;
    }
    .img597 {
      width: 100%;
    }
    .content {
      width: 90%;
      margin: 0px auto;
    }

    .content-box {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-bottom: 15px;
    }

    .content-box-left {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      box-sizing: border-box;
      /* border: 1px solid #141414; */
    }

    .content-box-right {
      width: 100%;
      margin-top: 15px;
      flex-wrap: wrap;
      display: flex;
      flex-wrap: wrap;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      justify-content: center;
      box-sizing: border-box;
      /* border: 1px solid #141414; */
    }

    .box-title {
      font-weight: bold;
      font-size: 19px;
      margin-bottom: 2vh;
      color: rgba(0, 0, 0, 0);
      line-height: 43px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      background-image: -webkit-linear-gradient(left, #FFFFFF, #FEB90B);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .box-subheading {
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      width: 90% !important;
      line-height: 18.5px;
      margin-top: 10px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .content-box-two {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 2vh;
    }

    .content-box-two-item {
      width: 100%;
      padding: 20px;
      margin-bottom: 15px;
      box-sizing: border-box;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      /* border: 1px solid #141414; */
    }
  }

  @media(min-width:576px) and (max-width:767.98px) {
    .title-3{
      text-align: center;
      font-family: Inter, Inter;
      font-weight: bold;
      font-size: 32px;

      background-image: -webkit-linear-gradient(bottom, #52525b, #ffffff);
      background-clip: text;
      -webkit-text-fill-color: transparent;

      line-height: 73px;
      font-style: normal;
      text-transform: none;
    }
    .img597 {
      width: 100%;
    }
    .content {
      width: 90%;
      margin: 0px auto;
    }

    .content-box {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .content-box-left {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      box-sizing: border-box;
      justify-content: center;
      /* border: 1px solid #141414; */
    }

    .content-box-right {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 15px;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      box-sizing: border-box;
      /* border: 1px solid #141414; */
    }

    .box-title {
      font-family: Inter, Inter;
      font-weight: bold;
      font-size: 18px;
      color: rgba(0, 0, 0, 0);
      line-height: 43px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      background-image: -webkit-linear-gradient(left, #FFFFFF, #FEB90B);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .box-subheading {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 18px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .content-box-two {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 2vh;
    }

    .content-box-two-item {
      width: 100%;
      padding: 20px;
      margin-bottom: 15px;
      box-sizing: border-box;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      /* border: 1px solid #141414; */
    }
  }

  @media(min-width:767px) {
    .title-3{
      display: none;

    }
    .img597 {
      width: 100%;
    }

    .content {
      width: 90%;
      margin: 0px auto;
    }

    .content-box {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .content-box-left {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      box-sizing: border-box;
      /* border: 1px solid #141414; */
    }

    .content-box-right {
      width: 100%;
      display: flex;
      margin-top: 15px;
      flex-wrap: wrap;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      box-sizing: border-box;
      /* border: 1px solid #141414; */
    }

    .box-title {
      font-family: Inter, Inter;
      font-weight: bold;
      font-size: 18px;
      color: rgba(0, 0, 0, 0);
      line-height: 43px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      background-image: -webkit-linear-gradient(left, #FFFFFF, #FEB90B);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .box-subheading {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 18px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .content-box-two {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 2vh;
    }

    .content-box-two-item {
      width: 100%;
      margin-bottom: 15px;
      padding: 20px;
      box-sizing: border-box;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      /* border: 1px solid #141414; */
    }
    .content {
      margin-top: -5vh !important; 
      width: 73%;
      transform: scale(0.46) !important;
      margin: 0px auto;
    }
  }

  @media(min-width:1200px) {
    .title-3{
      display: none;

    }
   .img990 {
      width: 100%;
    }
    .content {
      width: 80%;
      margin: 0px auto;
    }

    .content-box {
      display: flex;
      justify-content: space-around;
    }

    .content-box-left {
      width: 49%;
      display: flex;
      flex-wrap: nowrap;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      box-sizing: border-box;
      /* border: 1px solid #141414; */
    }

    .content-box-right {
      margin-top: 0px;
      flex-wrap: nowrap;
      width: 49%;
      display: flex;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      box-sizing: border-box;
      /* border: 1px solid #141414; */
    }

    .box-title {
      font-family: Inter, Inter;
      font-weight: bold;
      font-size: 18px;
      color: rgba(0, 0, 0, 0);
      line-height: 43px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      background-image: -webkit-linear-gradient(left, #FFFFFF, #FEB90B);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .box-subheading {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 18px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .content-box-two {
      display: flex;
      justify-content: space-between;
      margin-top: 1vh;
    }

    .content-box-two-item {
      width: 33%;
      padding: 20px;
      box-sizing: border-box;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      /* border: 1px solid #141414; */
    }
    .content {
      margin-top: -10vh !important; 
      width: 73%;
      transform: scale(0.80 ) !important;
      margin: 0px auto;
    }
    .contentB{
      position: absolute;
      top: 14vh;
    }
  }

  @media(min-width:1900px) {
    .title-3{
      display: none;
    
    }
    .content {
      width: 73%;
      transform: scale(0.89) !important;
      margin: 0px auto;
    }

    .content-box {
      display: flex;
      justify-content: space-around;
    }

    .content-box-left {
      width: 49%;
      display: flex;
      flex-wrap: nowrap;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      box-sizing: border-box;
      /* border: 1px solid #141414; */
    }

    .content-box-right {
      width: 49%;
      display: flex;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      padding: 20px;
      box-sizing: border-box;
      /* border: 1px solid #141414; */
    }

    .box-title {
      font-family: Inter, Inter;
      font-weight: bold;
      font-size: 18px;
      color: rgba(0, 0, 0, 0);
      line-height: 43px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      background-image: -webkit-linear-gradient(left, #FFFFFF, #FEB90B);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .box-subheading {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #999999b8;
      width: 70%;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .content-box-two {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5vh;
    }

    .content-box-two-item {
      width: 33%;
      padding: 20px;
      box-sizing: border-box;
      /* background: #141414; */
      border-radius: 8px 8px 8px 8px;
      /* border: 1px solid #141414; */
    }
    .content{
      margin-top: -4vh !important;
    }
    .contentB{
      position: absolute;
      top: 6vh;
    }
  }
</style>
